<template>
  <div class="user-page">
    <img :src="userIcon" class="user-icon">
    <ul class="info">
      <li>
        <span>联系人</span>
        <input v-model="name" class="name" placeholder="请填写联系人" />
      </li>
      <li>
        <span>手机号码</span>
        <input v-model="phone" class="phone" placeholder="请填写手机号码" />
      </li>
      <li>
        <span>地址</span>
        <input v-model="address" class="address" placeholder="详细地址" />
      </li>
    </ul>
    <div class="sure" @click="submit">
      <em>确定</em>
      <img src="/static/img/btn_back.png">
    </div>

    <cover :config="{title: '填写成功'}" v-if="showCover"></cover>
  </div>
</template>

<script>
import cover from '@/components/cover'
export default {
  name: '',
  data () {
    return {
      query: {},
      name: '',
      phone: '',
      address: '',
      userIcon: '',
      showCover: false
    }
  },
  components: {
    cover
  },
  methods: {
    async submit () {
      var that = this
      var message = ""

      if (this.address.length < 3) {
        message = '请输入详细的地址'
      }
      if (!/^1[0-9][0-9]{9}$/.test(this.phone)) {
        message = '请输入正确的手机号'
      }
      if (this.name.length < 2) {
        message = '请输入正确的姓名'
      }

      if (message) {
        wx.showToast({
          icon: 'none',
          title: message
        })
        return
      }
      wx.showToast({
        icon: 'loading',
        title: '请求中...',
        duration: 50000
      })

      await this.$request({
        url: '/GroupBuyBackendV1/user',
        type: 'POST',
        data: {
          name: that.name,
          mobile: that.phone,
          address: that.address,
          dateTime: new Date().getTime(),
          userId: wx.getStorageSync('userId'),
          openId: wx.getStorageSync('openId'),
          userInfo: wx.getStorageSync('userJson')
        }
      })
      wx.hideToast()
      //完成设置
      this.showCover = true
      wx.setStorageSync('setUserInfo', true)
      setTimeout(function() {
        that.showCover = false
        that.userInfo()
        if (that.query.back == 1) {
          wx.navigateTo({
            url: '/pages/group-detail/main?groupId='+ that.query.groupId
          })
        }
      }, 1500)
    },
    async userInfo () {
      wx.showToast({
        icon: 'loading',
        duration: 50000
      })
      var info = await this.$request({
        url: '/GroupBuyBackendV1/user/'+ wx.getStorageSync('userId')
      })
      wx.hideToast()
      this.name = info.name
      this.phone = info.mobile
      this.address = info.address
    }
  },
  mounted () {
      this.userInfo()
      this.query = this.$root.$mp.query
      this.userIcon = wx.getStorageSync('userIcon')
  }
}
</script>

<style lang="stylus" scoped>
.user-page {
  padding: 0 30rpx
  padding-top: 78rpx
  .user-icon {
    width: 168rpx
    height: 168rpx
    border-radius: 50%
    margin: 0 auto
  }
  .info {
    margin-top: 40rpx
    border-bottom: 1px solid #f4f4f4
    li {
      position: relative
      overflow: hidden
      border-top: 1px solid #f4f4f4
      span {
        color: #131313
        font-size: 30rpx
        line-height: 110rpx
        position: absolute
      }
      input {
        margin-left: 168rpx
        line-height: 110rpx
        height: 110rpx
        color: #131313
        font-size: 30rpx
      }
    }
  }
  .sure {
    left: 0
    bottom: 0
    position: fixed
    width: 100%
    height: 94rpx
    line-height: 94rpx
    text-aligin: center
    color: #fff
    background: #fff
    em {
      position: absolute
      line-height: 94rpx
      text-align: center
      width: 100%
      font-size: 32rpx
    }
    img {
      width: 100%
      height: 100%
    }
  }
}

</style>
